<template>
	<view class="points-mall">
		<view class="tabTop">
			<scroll-view scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true">
				<view class="box" :style="{ width: totalWidth + 'px' }">
					<view class="tabTopItem" v-for="(item, index) in tabList" :key="index" :class="{ ac: tabTopCurrent == index }" @click="tabTopChange(item, index)">
						<image :src="item.iconUrl" class="tips"></image>
						<text class="name">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="card product">
			<view class="product-list">
				<uni-row :gutter="30">
					<uni-col :span="12" v-for="item in dataList" :key="item.id">
						<navigator :url="`/pages/mall/productDetails?content=${encodeURIComponent(JSON.stringify(item))}`">
							<view class="product-item">
								<image :src="item.imageKey" mode="aspectFill" :draggable="false" />
								<view class="product-text">
									<view class="product-title">{{ item.name }}</view>
									<view class="product-integral">
										<text>{{ item.price }}</text>
										元
									</view>
								</view>
							</view>
						</navigator>
					</uni-col>
				</uni-row>
			</view>
			<uni-load-more :status="loadmore" />
		</view>
	</view>
</template>

<script>
import { productList } from '@/api/convenientServices';
export default {
	data() {
		return {
			loadmore: 'loading',
			ifBottomRefresh: false,
			dataList: [], //数据
			total: null, //总条数
			tabTopList: [],
			tabTopCurrent: 0,
			page: {
				current: 1, //第几页
				size: 5 //显示多少条
			}
		};
	},
	methods: {
		getList(userId) {
			this.loadmore = 'loading';
			productList({ ...this.page, userId }).then((res) => {
				//请求接口成功之后，判断加载状态，处理数据
				if (this.ifBottomRefresh) {
					this.dataList = this.dataList.concat(res.data.records);
				} else {
					this.dataList = res.data.records;
				}
				this.ifBottomRefresh = false;
				this.loadmore = this.dataList.length < res.data.total ? 'more' : 'noMore';
			});
		},
		refresh() {
			this.page.current = 1;
			this.ifBottomRefresh = false;
			this.getList(this.userId);
		},
		// 点击tab切换高亮，并进行滑动，（index-1）是为了点击项显示在第二栏的位置
		tabTopChange(item, index) {
			this.tabTopCurrent = index;
			this.scrollLeft = this.itemWidth * (index - 1);
			if (index === 0) {
				this.getRouteData();
				this.$refs.routePopup.open('top');
			} else {
				this.getLocationListByType(item.id);
			}
			this.showDetail = false;
			this.showRouteDetail = false;
		}
	},
	onLoad(e) {
		this.userId = e.userId;
		this.getList(e.userId);
		/*
			计算总宽度和每个item的宽度
			item宽度 = 自身宽度 + 8px右边距
			总宽度 = item个数 * 每个item的宽度
		*/
		this.$nextTick(() => {
			let dom = uni.createSelectorQuery().select('.tabTopItem');
			dom.boundingClientRect((data) => {
				let num = this.tabTopList.length;
				this.itemWidth = data.width;
				this.totalWidth = num * this.itemWidth;
			}).exec();
		});
	},
	onPullDownRefresh() {
		this.refresh();
	},
	onReachBottom() {
		this.page.current += 1;
		// 没有更多数据之后 就不会在触底加载
		if (this.loadmore == 'noMore') return;
		this.ifBottomRefresh = true;
		this.getList(this.userId); // 触底 拉取数据
	}
};
</script>

<style lang="scss" scoped>
.tabTop {
	position: relative;
	z-index: 1;
	background: #ffffff;
	box-shadow: 5px 0 5px 0 #585858;
	padding: 0 15rpx;
	/* 隐藏滚动条样式 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
	}
	.box {
		display: flex;
		align-items: center;
		.tabTopItem {
			text-align: center;
			width: 120rpx;
			height: 120rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #333;
			flex-shrink: 0;
			.tips {
				width: 60rpx;
				height: 60rpx;
				display: block;
				margin: 10rpx auto 6rpx auto;
			}
		}
		.ac {
			font-size: 24rpx;
			color: #009b4c;
			.name {
				position: relative;
				&::after {
					content: '';
					display: block;
					position: absolute;
					bottom: -2rpx;
					left: 2rpx;
					width: calc(100% - 4rpx);
					height: 2rpx;
					background: #009944;
				}
			}
		}
	}
}
.product {
	box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.08);
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	.product-list {
		padding: 0 30rpx 30rpx;
		.product-item {
			margin-top: 30rpx;
			background: #ffffff;
			border-radius: 16rpx;
			border: 1rpx solid #e3e3e3;
			image {
				width: 300rpx;
				height: 225rpx;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
			}
			.product-text {
				padding: 20rpx;
				.product-title {
					font-size: 26rpx;
					line-height: 36rpx;
					margin-bottom: 20rpx;
				}
				.product-integral {
					font-size: 20rpx;
					color: #fc0204;
					text {
						font-size: 26rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
}
</style>
